import React from 'react';
import { Card, Form, DatePicker, Row, Col, Input, Button, Table, Select } from 'antd';
import styles from './index.less';
import { FormInstance } from 'antd/lib/form';

import { history } from 'umi';

const { RangePicker } = DatePicker;

const {Option, OptGroup} = Select;

const columns = [
  {
    title: '时间',
    dataIndex: 'name',
    key: 'name',
    width: 240,
    render: (_,item) => {
    	return '2021-02-27 10:41:35'
    }
  },
  {
    title: '资金类型',
    dataIndex: 'age',
    key: 'age',
    width: 150,
    render: (_,item) => {
    	return '支付宝充值'
    }
  },
  {
    title: '资金变动',
    dataIndex: 'address',
    key: 'address',
    width: 130,
    render: (_,item) => {
      
      
      if((item.key % 2) === 0){
        return <span style={{color: '#f73131'}}>+625.60</span>
      }else{
        return <span style={{color: '#2440b3'}}>-625.60</span>
      }
    	 
    }
  },
  {
    title: '账户余额',
    dataIndex: 'address',
    key: 'address',
    width: 130,
    render: (_,item) => {
    	return '4.00'
    }
  },
  {
    title: '备注',
    dataIndex: 'address',
    key: 'address',
    render: (_,item) => {
      let l = [
      '支付宝充值4.00元',
      '余额提现625.6元（含手续费+通道费6.25元）',
      '订单号：05672-1，退款 76元 (红包退款：1元)',
      '订单号：05672 (红包支付：1.00元)',
      '订单号：05539 (红包支付：1.00元)',
      '开票扣税：39.4元',
      '订单号：05095 (红包支付：1.00元)',
      '订单号：05156-8，退款 56元 (红包退款：1元)',
      ]
    	return l[item.key] ? l[item.key] : ''
    }
  }
];









let dataSource = [
]

for(let i=0;i<100;i++){
	dataSource.push({key: i})
}

export default class Message extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Card title="资金明细" bordered={false} style={{ width: '100%' }}>
					<>
					<div className={styles.top}>
						<ul className={styles.topBox}>
							<li className={styles.listItem} style={{borderRight: '1px solid #e4e4e4'}}>
								<div style={{float: 'left',width: '50%'}}>
									<div className={styles.title}>账户余额</div>
									<div className={styles.content} style={{color: '#ea6635'}}>
										￥4.00
									</div>
								</div>
								<div style={{marginLeft: '50%',width: '50%',textAlign: 'left',height:80}}>
									<Button style={{ marginTop: '25px' }} type="primary" onClick={() => {
										history.push(`/moneyManagement/recharge`)
									}}>
						                充值
						            </Button>
								</div>
							</li>
							<li className={styles.listItem} style={{borderRight: '1px solid #e4e4e4'}}>
								<div className={styles.title}>充值总额</div>
								<div className={styles.content}>￥4644.00</div>
							</li>
							<li className={styles.listItem}>
								<div className={styles.title}>消费总额</div>
								<div className={styles.content}>￥4014.40</div>
							</li>
						</ul>
					</div>
					<div className={styles.search}>
						<Form ref={this.formRef}>
							<Form.Item
                                name="value1"
                                label="交易时间"
                            >
                            	<RangePicker />
                            </Form.Item>
                            <Row gutter={16}>
                            	<Col span={6}>
                            		<Form.Item
		                                name="value2"
		                                label="资金类型"
		                            >
		                            	<Select mode="multiple" placeholder="请选择">
											<OptGroup label="收入类型">
												<Option value="1">支付宝充值</Option>
												<Option value="2">对公打款</Option>
												<Option value="3">对公打款</Option>
												<Option value="4">平台充值</Option>
												<Option value="5">系统赠送</Option>
												<Option value="6">账户修正</Option>
												<Option value="7">退稿返还</Option>
												<Option value="8">收益转换</Option>
											</OptGroup>
												<OptGroup label="支出类型">
												<Option value="9">发稿支付</Option>
												<Option value="10">购买产品</Option>
												<Option value="11">开票扣税</Option>
											</OptGroup>
										</Select>
                            		</Form.Item>
                            	</Col>
                            	<Col span={6}>
                            		<Form.Item
		                                name="value3"
		                                label="订单号"
		                            >
		                            	<Input placeholder="请输入订单号" />
                            		</Form.Item>
                            	</Col>
                            	<Col span={6}>
                            		<Form.Item>
                            			<Button type="primary">
							                查询一下
							            </Button>
		                            </Form.Item>
                            	</Col>
                            </Row>
						</Form>
					</div>
					<Table dataSource={dataSource} columns={columns} />
					</>
				</Card>
			</div>
		)
	}
}